import { useJson } from '@/hooks/tools/useJson';
import { 
    Alert, 
    Box, 
    Button, 
    Chip, 
    Divider, 
    Paper, 
    Snackbar, 
    Stack, 
    Typography 
} from '@mui/material';
import { useState } from 'react';
import ToolPageTemplate from '@/components/ToolPageTemplate';
import ActionButtons from './components/ActionButtons';
import EditorSection from './components/EditorSection';
import PathQuerySection from './components/PathQuerySection';
import ResultSection from './components/ResultSection';
import DataObjectIcon from '@mui/icons-material/DataObject';
import ExampleIcon from '@mui/icons-material/Description';
import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';

const JsonPage = () => {
    const [snackbarOpen, setSnackbarOpen] = useState(false);
    const [snackbarMessage, setSnackbarMessage] = useState('');

    const {
        jsonContent,
        jsonResult,
        jsonPath,
        error,
        loadExample,
        copyResult,
        setJsonContent,
        setJsonPath,
        formatJson,
        zipJson,
        escapeJson,
        unescapeJson,
        findJsonPath,
    } = useJson();

    const handleCopyResult = () => {
        copyResult();
        setSnackbarMessage('已复制到剪贴板');
        setSnackbarOpen(true);
    };

    const handleCloseSnackbar = () => {
        setSnackbarOpen(false);
    };

    return (
        <ToolPageTemplate 
            title="JSON 处理工具"
            description="JSON格式化、压缩、转义、path查找等全方位JSON处理工具"
            category="开发工具"
            categoryColor="#52C41A"
        >
            {/* 快速信息区域 */}
            <Box sx={{ mb: 4 }}>
                <Stack direction="row" spacing={2} justifyContent="center" flexWrap="wrap">
                    <Chip 
                        icon={<DataObjectIcon />} 
                        label="JSON处理" 
                        variant="outlined" 
                        color="primary"
                    />
                    <Chip 
                        icon={<AutoFixHighIcon />} 
                        label="格式化" 
                        variant="outlined" 
                        color="secondary"
                    />
                </Stack>
            </Box>

            <Stack spacing={4}>
                {/* 编辑器区域 */}
                <Paper 
                    elevation={0} 
                    sx={{ 
                        p: 3, 
                        borderRadius: 3,
                        border: '1px solid',
                        borderColor: 'divider',
                        width: '100%'
                    }}
                >
                    <Box sx={{ 
                        display: 'flex', 
                        justifyContent: 'space-between', 
                        alignItems: 'center',
                        mb: 3 
                    }}>
                        <Typography 
                            variant="h6" 
                            sx={{ 
                                fontWeight: 700,
                                display: 'flex',
                                alignItems: 'center',
                                gap: 1
                            }}
                        >
                            <DataObjectIcon color="primary" />
                            JSON 编辑器
                        </Typography>
                        <Button
                            variant="text"
                            size="small"
                            startIcon={<ExampleIcon />}
                            onClick={loadExample}
                            sx={{ 
                                textTransform: 'none',
                                fontWeight: 600,
                                color: 'primary.main',
                                '&:hover': {
                                    bgcolor: 'primary.main',
                                    color: 'primary.contrastText'
                                }
                            }}
                        >
                            加载示例
                        </Button>
                    </Box>

                    <EditorSection
                        jsonContent={jsonContent}
                        setJsonContent={setJsonContent} 
                    />

                    {/* 操作按钮 */}
                    <Box sx={{ mt: 3 }}>
                        <ActionButtons
                            formatJson={formatJson}
                            zipJson={zipJson}
                            escapeJson={escapeJson}
                            unescapeJson={unescapeJson}
                            handleCopyResult={handleCopyResult}
                            hasResult={!!jsonResult}
                        />
                    </Box>

                    <Divider sx={{ my: 3 }} />

                    {/* JSONPath 查询 */}
                    <PathQuerySection
                        jsonPath={jsonPath}
                        setJsonPath={setJsonPath}
                        findJsonPath={findJsonPath}
                        hasContent={!!jsonContent.trim()}
                    />
                </Paper>

                {/* 结果区域 */}
                {jsonResult && (
                    <Paper 
                        elevation={0} 
                        sx={{ 
                            p: 3, 
                            borderRadius: 3,
                            border: '1px solid',
                            borderColor: 'divider',
                            width: '100%'
                        }}
                    >
                        <ResultSection
                            jsonResult={jsonResult}
                            handleCopyResult={handleCopyResult}
                        />
                    </Paper>
                )}
            </Stack>

            {/* 错误提示 */}
            <Snackbar
                open={!!error}
                autoHideDuration={6000}
                anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
            >
                <Alert severity="error" sx={{ width: '100%' }}>
                    {error}
                </Alert>
            </Snackbar>

            {/* 成功提示 */}
            <Snackbar
                anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
                open={snackbarOpen}
                autoHideDuration={3000}
                onClose={handleCloseSnackbar}
            >
                <Alert severity="success" sx={{ width: '100%' }}>
                    {snackbarMessage}
                </Alert>
            </Snackbar>
        </ToolPageTemplate>
    );
};

export default JsonPage;